import React from 'react';
import './Piece.css';

const pieceEmoji = {
  ELEPHANT: '🐘',
  LION: '🦁',
  TIGER: '🐯',
  LEOPARD: '🐆',
  WOLF: '🐺',
  DOG: '🐕',
  CAT: '🐱',
  RAT: '🐭',
};

function getSvgPath(type) {
  try {
    return require(`../assets/svg/${type.toLowerCase()}.svg`).default;
  } catch {
    return null;
  }
}

export default function Piece({ piece, animate }) {
  const svgPath = getSvgPath(piece.type);
  return (
    <span className={`piece player${piece.owner}${animate ? ' animate' : ''}`}>
      {svgPath ? <img src={svgPath} alt={piece.type} className="piece-svg" /> : pieceEmoji[piece.type]}
    </span>
  );
} 